<template>
  <!--提交订单页面-->
  <div>
    <wv-panel>
      <wv-media-box :thumb="goods.coverImg | imgPathFilter" :title="goods.goodsName"
                    :description="goods.agentPrice+'元'"></wv-media-box>
    </wv-panel>
    <div class="divider"></div>
    <wv-group>
      <wv-cell title="数量" value="1" v-if="goods.isLimitNumber==1" v-model="number"/>
      <wv-cell title="数量" v-if="goods.isLimitNumber==2">
        <wv-number-spinner slot="ft" :min="1" v-model="number" input-width="2em" @change="onChange"/>
      </wv-cell>
      <wv-cell title="总计" :value="resultPrice+'元'" class="total"/>
    </wv-group>
    <div class="divider"></div>
    <offer :goodsList="goodsList" :resultPrice="resultPrice" :buySource="1" showPayWay="PAY_BALANCE"></offer>
  </div>
</template>

<script type="text/ecmascript-6">
  import {Dialog} from 'we-vue'
  import {getAgentGoodDetail} from '../../utils/http'
  import {Toast} from 'we-vue'
  import offer from '../offertemplate/offertemplate'

  export default {
    name: 'submitorder',
    props: {},
    data() {
      return {
        src: require('../../assets/guibin.png'),
        number: 1,
        goods: {},
        goodsList: [],
        resultPrice: "",
        categoryCode: ''
      };
    },
    methods: {
      onChange(val) {
        this.goodsList = [];
        let goodsPrice = this.goods.agentPrice;
        this.goods['goodsNum'] = val;
        this.goodsList.push(this.goods);
        let resultPrice = goodsPrice * val;
        this.resultPrice = resultPrice;
      },
      getGoodsDetail(params) {
        getAgentGoodDetail(params).then(res => {
          console.log(res);
          if (res.code == 100) {
            this.goodsList = [];
            this.categoryCode = res.object.categoryCode;
            this.goods = res.object.goods;
            this.goods['goodsNum'] = this.number;
            this.goods['orderType'] = 1;
            this.goods['unitPrice'] = this.goods.goodsPrice;
            this.resultPrice = this.goods.goodsPrice;
            if (this.categoryCode == 'vipcard_1' || this.categoryCode == 'vipcard_2') {
              this.goods['orderType'] = 1;
            }
            if (this.categoryCode == 'viproom') {
              if (this.goods.isAppoint == 2) {
                this.goods['orderType'] = 2;
              }
            }
            if (this.categoryCode == 'viponly') {
              if (this.goods.isAppoint == 2) {
                this.goods['orderType'] = 3;
              }
            }
            if (this.categoryCode == 'insurance') {
              this.goods['orderType'] = 4;
            }
            this.resultPrice = this.goods.agentPrice;
            this.goods['unitPrice'] = this.goods.agentPrice;
            this.goodsList.push(this.goods);
          } else {
            Toast.fail(res.info);
            this.$router.go(-1);
          }
        })
      },
    },
    created() {
      let goodsId = this.$route.query.goodsId;
      let params = {goodsId: goodsId};
      this.getGoodsDetail(params);
    },
    components: {
      offer
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .divider {
    height: 10px;
    background-color: #eee;
  }
</style>
